<template>
<div class="time">
   <div class="box" v-for="it in list" :key='it.text'>
    <div>
        <div class="dbox">
    <span  class="abox">{{it.title}}</span>
    <span class="bbox">{{it.text}}</span>
</div>
    <div class="cbox">{{it.del}}</div>
        
    </div>
   
   </div>

</div>
</template>

<script>
export default {
name: '',
data() {
 return {
    list:[
        {title:36,text:'min',del:'今日学习'},
        {title:2,text:'days',del:'连续学习'},
        {title:54,text:'h',del:'累计学习'}
    ]
 }
}
}
</script>

<style lang="less" scoped>
@import '../../../style/common.less';
.time{
    display: flex;
    width: 90%;
    justify-content: space-between;
    padding: 2% 0;
    margin: 3% 5%;
         background-color: @cf;
         
    .box{
        margin:2vh ;
       text-align: center; 
       .dbox{
        margin-bottom:2vw ;
        .abox{
        font-size:1.5rem;
        margin-right:2vw ;
        font-weight: 700;

       }
       .bbox{
        font-size:0.8rem ;
       color:@g5;
       }

       }
       .cbox{
        font-size:0.8rem ;
       color:@g5;
       }
      
 }
}


</style>
